<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" class="max_height_width">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ws小例子</title>
<script th:src="@{/js/jQuery/jquery-3.4.1.min.js?version=201904021653}"></script>
<script type="text/javascript">
	var ws = null;
	function startWebSocket() {
		var i_status = document.getElementById("i_status").value;
		if(i_status == 1){
			ws.close();
			return;
		}
		var phone = document.getElementById('phone').value;
		var password = document.getElementById('password').value;
		if ('WebSocket' in window){
			ws = new WebSocket("ws://localhost:8080/WsChat/connect/"+phone,password);
			console.info("onclose-ws:"+Object.keys(ws));
		}else if ('MozWebSocket' in window){
			ws = new MozWebSocket("ws://localhost:8080/WsChat/connect/"+phone,password);
			console.info("onclose-ws:"+Object.keys(ws));
		}else{
			alert("您的浏览器不支持Websocket");
		}
		ws.onmessage = function(evt) {
			setMessageInnerHTML(evt.data);
		};
		function setMessageInnerHTML(innerHTML) {
			$('#div_msg_content').append("<div style='width: 360px; background-color: #FFECF5;'>"+innerHTML+"</div>");
			var div = document.getElementById('div_msg_content');
			div.scrollTop = div.scrollHeight;
		}
		ws.onclose = function(evt) {
			console.info("onclose:"+evt.code);
			console.info("onclose:"+evt.reason);
			document.getElementById("i_status").value="0";
			document.getElementById("a_status").innerHTML = "已断开，点击连接";
			if(evt.code == 4003){
				$('#div_msg_content').append("<div style='width: 360px; background-color: red;'>"+evt.reason+"</div>");
			}
		};
		ws.onopen = function(evt) {
			console.info("onopen:"+ws.readyState);
			console.info("onopen:"+JSON.stringify(evt));
			document.getElementById("i_status").value="1";
			document.getElementById("a_status").innerHTML = "已连接，点击断开";
		};
		
		ws.onerror = function(errorEvent) {
		    console.log("onerror: ", errorEvent);
		};
	}
	function sendMsg() {
		var i_status = document.getElementById("i_status").value;
		if(i_status == 0){
			alert("请先连接");
		}
		var fromName = document.getElementById('phone').value;
		var content = document.getElementById('writeMsg').value; //发送内容
		ws.send(fromName + "：" + content);//注意格式
		$('#div_msg_content').append("<div style='width: 360px; background-color: #FFF7FB;'>我："+content+"</div>");
		var div = document.getElementById('div_msg_content');
		div.scrollTop = div.scrollHeight;
		document.getElementById('writeMsg').value = "";
	}
</script>
</head>
<body>
	<div style="width: 360px; margin: 0 auto;">
		<div>
			<span>昵称：</span>
			<input type="text" name="phone" id="phone">
			<span>随便填 </span>
		</div>
		<div>
			<span>密码：</span>
			<input type="password" name="password" id="password">
			<span>随便填</span>
		</div>
		<div>
			<span>状态：</span>
			<input type="hidden" value="0" id="i_status">
			<a href="#" onclick="startWebSocket()" id="a_status">点击连接</a>
		</div>
		<div>
			<div>
				<span>信息区域：</span>
				<div style="width: 360px; height: 720px; border-width: 1px; border-color: blue; border-style: solid; overflow:hidden; overflow-y:auto;" id="div_msg_content">
				</div>
				<div style="width: 360px; height: 5px;"></div>
				<span>发送信息区域：</span>
				<textarea rows="2" cols="32" id="writeMsg"></textarea>
				<input type="button" value="点击发送" onclick="sendMsg()">
			</div>
		</div>
	</div>
</body>
</html>